<html>
  <head>
    <script type="text/javascript">

      var link = location.href;
      link_split = link.split('Chamado');
      var pagina = link_split[0]+"Indicadores/";

      google.load("visualization", "1", {packages:["corechart"], callback:drawChart});//Fix: http://jona.than.biz/blog/using-google-charts-api-inside-jquery-load/

      $.ajaxSetup({cache:false});
      var dados = $("#gerar_indicadores").serialize();
      var gerar_grafico_area = $.ajax({
        url: pagina+'gerar_grafico_area/',
        type: "POST",
        data: dados,
        async: false,
        success: function(teste){
          //grafico = eval(teste);
        },
      }).responseText;

       var gerar_grafico_unidade = $.ajax({
        url: pagina+'gerar_grafico_unidade/',
        type: "POST",
        data: dados,
        async: false,
        success: function(teste){
          //grafico = eval(teste);
        },
      }).responseText;

      var gerar_grafico_grupo = $.ajax({
        url: pagina+'gerar_grafico_grupo/',
        type: "POST",
        data: dados,
        async: false,
        success: function(teste){
          //grafico = eval(teste);
        },
      }).responseText;

      var gerar_grafico_sub_grupo = $.ajax({
        url: pagina+'gerar_grafico_sub_grupo/',
        type: "POST",
        data: dados,
        async: false,
        success: function(teste){
          //grafico = eval(teste);
        },
      }).responseText;

      var gerar_grafico_prazos = $.ajax({
        url: pagina+'gerar_grafico_prazos/',
        type: "POST",
        data: dados,
        async: false,
        success: function(teste){
          //grafico = eval(teste);
        },
      }).responseText;

      function drawChart() {
        var data = google.visualization.arrayToDataTable(eval(gerar_grafico_area));

        var options_area = {
          title: 'NA_AR – Número de Atendimentos por Área',
          //hAxis: {title: 'Áreas', titleTextStyle: {color: 'black'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_area'));
        chart.draw(data, options_area);

        var grafico_unidade = google.visualization.arrayToDataTable(eval(gerar_grafico_unidade));
        var options_unidade = {
          title: 'NA_UN – Número de Atendimentos por Unidade',
          //hAxis: {title: 'Unidade', titleTextStyle: {color: 'black'}}
        };

        var chart_unidades = new google.visualization.ColumnChart(document.getElementById('chart_unidades'));
        chart_unidades.draw(grafico_unidade, options_unidade);

        var grafico_grupo = google.visualization.arrayToDataTable(eval(gerar_grafico_grupo));
        var options_grupo = {
          title: 'NA_GRU – Número de Atendimentos por Grupo',
          //hAxis: {title: 'Grupo', titleTextStyle: {color: 'black'}}
        };

        var chart_grupo = new google.visualization.ColumnChart(document.getElementById('chart_grupo'));
        chart_grupo.draw(grafico_grupo, options_grupo);

        var grafico_sub_grupo = google.visualization.arrayToDataTable(eval(gerar_grafico_sub_grupo));
        var options_grupo = {
          title: 'NA_SGR – Número de Atendimentos por SubGrupo',
          //hAxis: {title: 'Grupo', titleTextStyle: {color: 'black'}}
        };

        var chart_sub_grupo = new google.visualization.ColumnChart(document.getElementById('chart_sub_grupo'));
        chart_sub_grupo.draw(grafico_sub_grupo, options_grupo);


        var grafico_prazos = google.visualization.arrayToDataTable(eval(gerar_grafico_prazos));
        var options_grupo = {
          title: 'ADP – Atendimentos Dentro do Prazo X AFP – Atendimentos Fora do Prazo',
          //hAxis: {title: 'Grupo', titleTextStyle: {color: 'black'}}
        };

        var chart_sub_grupo = new google.visualization.ColumnChart(document.getElementById('prazos'));
        chart_sub_grupo.draw(grafico_prazos, options_grupo);

      }
    </script>

    <style type="text/css">
      .graficos div{
        float: left;
        display: block;
        margin: 2px;
      }
    </style>
  </head>
  <body>
    <div class="span12 graficos">
      <div id="chart_area" style="width: 465px; height: 300px;"></div>
      <div id="chart_unidades" style="width: 465px; height: 300px;"></div>
      <div id="chart_grupo" style="width: 465px; height: 300px;"></div>
      <div id="chart_sub_grupo" style="width: 465px; height: 300px;"></div>
      <div id="prazos" style="width: 465px; height: 300px;"></div>
    </div>
  </body>
</html>